<template>
    <div>
        <Nav></Nav>
<div class="container-fluid" style="margin-top: 100px;">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
                <table class="text-center table table-bordered" align="center" width="100%">
                    <tr  class="bg-light text-black-50">
                        <th colspan="2" ><h3>修改会员信息</h3></th>
                    </tr>
                    <tr>
                        <td style="width: 150px;">用户名称：</td>
                        <input type="hidden" name="userId" th:value="${users.id}">
                        <td><input class="form-control" placeholder="会员名" type="text" name="username"
                      
                             v-model="user.username"
                             ></td>
                    </tr>
                    <tr>
                        <td>年龄：</td>
                        <td><input class="form-control" placeholder="年龄" type="number" name="age"
                            v-model="user.age"
                            ></td>
                    </tr>
                    <tr>
                        <td>手机号：</td>
                        <td><input class="form-control" placeholder="手机号" type="text"  name="mobile"
                            v-model="user.mobile"
                           ></td>
                    </tr>
                    <tr>
                        <td>个人邮箱：</td>
                        <td><input class="form-control" placeholder="个人邮箱" type="text" name="email" 
                            v-model="user.email"
                           ></td>
                    </tr>
                    <tr>
                        <td>地址：</td>
                        <td><input class="form-control" placeholder="地址" type="text" name="address" 
                            v-model="user.address"
                       ></td>
                    </tr>
                    <!--  -->
                    <tr>
              <td>图片：</td>
              <td>
                <img
                  :src="user.avatar"
                  class="img-fluid img-thumbnail"
                  alt=""
                  style="width: 100px; height: 40%; object-fit: cover"
                />
              </td>
            </tr>
            <tr>
              <td>会员图片：</td>
              <td>
                <el-upload
                  class="upload-demo"
                  action="/api/upload"
                  multiple
                  :on-preview="handlePreview"
                  :on-success="handleSuccess"
                >
                  <el-button type="primary">选择图片</el-button>
                </el-upload>
              </td>
            </tr>
                    <!--  -->
                    <tr>
                        <td>会员描述：</td>
                        <td><input class="form-control" placeholder="个人描述" type="text" name="description"
                            v-model="user.description"
                 ></td>
                    </tr>
                    <tr>
                        <td><input class="btn btn-outline-warning" style="width: 100px" 
                            @click="back()"
                            value="返回"></td>
                        <td><input class="btn btn-success"
                             style="width: 200px" type="submit"
                              value="提交修改"
                              @click="updateUser()"
                              ></td>
                        <td><input class="btn btn-outline-warning" type="reset" value="清空修改"></td>
                    </tr>
                </table>
        </div>
        <div class="col-md-3"></div>
    </div>
</div>
    </div>
</template>

<script lang="ts" setup name="EditUser">
import Nav from "../Nav.vue";
import "../../assets/css/bootstrap.min.css";
import "../../assets/css/font-awesome.css";
import { getToken } from "../../utils/auth";
import { ref,reactive,onMounted ,watch} from "vue";
import { useRoute, useRouter } from "vue-router";
import { getVipUserInfo ,updateVipUser} from "../../api/vipuser";
import { ElMessage } from "element-plus";
const route = useRoute();
const router = useRouter();
const userId = route.params.id as string;
const user = reactive({
id: "",
  username: "",
  age: "",
  mobile: "",
  email: "",
  address: "",
  description: "",
  avatar: "",
});
const handlePreview: UploadProps["onPreview"] = (uploadFile) => {};
const handleSuccess: UploadProps["onSuccess"] = (value) => {
  if (value.code === 1) {
    ElMessage.success("图片上传成功")
    user.avatar = value.data;
  }
  if (value.code === 0) {
    ElMessage.error(value.msg);
  }
};
const getUserInfo = async () => {
  const res = await getVipUserInfo(userId);
  if (res.data.code === 1) {
    Object.assign(user, res.data.data);
  }
};
const updateUser = async () => {
const res = await updateVipUser(user)
if (res.data.code === 1) {
    ElMessage.success("修改会员信息成功")
    setTimeout(() => {
      router.push("/userList");
      window.location.href = "/userList";
    }, 2000);
}
}
watch(
  () => route.params.id,
  async (newId: any) => {
    if (newId !== userId) {
        userId = newId;
        user = null;
      await onMounted();
    }
  }
);
const back = () => {
  window.location.href = "/userList";
}

onMounted(() => {
    getUserInfo()
})
</script>

<style scoped>

</style>